<script>
import MapCard from '../../card/MapCard';
import MapData from './MapData';
import MapAdd from './MapAdd';
import MapSet from './MapSet';
import MapDelete from './MapDelete';
import MapParams from './MapParams';
import MapPreview from './MapPreview';
import WorkSpaceQuery from '@/mixins/WorkspaceQuery';
import * as types from '../../../../store/types.js';
import * as utils from '../../../../utils/helps.js';

export default {
  name: 'MapCardEdit',
  components: {
    MapCard,
    MapData,
    MapAdd,
    MapSet,
    MapDelete,
    MapPreview,
    MapParams,
  },
  mixins: [WorkSpaceQuery],
  data() {
    return {
      isCollapsed: false,
      showSetting: true,
      settingName: '图层管理',
      settingComponents: 'MapAdd',
      activeName: 'map',
      subjectId: '',
      isRenderMap: true,
      editLayerData: {},
      mapId: '',
    };
  },
  computed: {
    menuitemClasses() {
      return ['menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
    },
    appData() {
      return this.$store.state.app.appData;
    },
    allControl() {
      return this.$store.getters.controls;
    },
    controls() {
      if (Object.keys(this.allControl).length !== 0) {
        return this.allControl[this.$store.getters.currentId];
      } else {
        return {};
      }
    },
  },
  beforeMount() {
    if (Object.keys(this.allControl).length === 0) {
      this.getLastAppData();
    }
    if (this.$store.getters.currentId === '') {
      this.$store.commit(types.UPDATA_APPLY_CURRENTID, this.$router.history.current.params.id);
    }
  },
  // beforeRouteLeave(to, from, next) {
  //   const map = utils.findComponentDownward(this, 'BaseMap');
  //   if (this.$store.state[map.mapId]) {
  //     this.$store.unregisterModule(map.mapId);
  //   }
  //   if (this.$store.state['defaultmap']) {
  //     this.$store.unregisterModule('defaultmap');
  //   }
  //   map.$mapObject.remove();
  //   next();
  // },
  methods: {
    setControls(allOptions) {
      let mapOption = [];
      for (const [key, value] of Object.entries(allOptions)) {
        if (Array.isArray(value) && value.length !== 0) {
          const computeValue = [];
          value.forEach(item => {
            computeValue.push({
              types: key,
              ...item,
            });
          });
          mapOption.push(computeValue);
        } else {
          mapOption.push({
            types: key,
            ...value,
          });
        }
      }
      return mapOption;
    },
    // 菜单选择
    selectMenu(name, isRenderMap) {
      this.showSetting = true;
      isRenderMap ? (this.isRenderMap = isRenderMap) : (this.isRenderMap = false);
      this.activeName = name;
      this.filterMenuName(name);
      const state = {
        map() {},
        data() {},
        mapFunction() {},
        settings() {},
        save() {
          // 保存应用
          this.upDataAppConfig(
            {
              path: `${window.location.origin}/workspace/${this.appData.id}`,
              info: JSON.stringify(this.allControl),
            },
            {
              id: this.appData.id,
            }
          );
        },
        mapDelete() {},
        params() {},
        preview() {},
        goOut() {
          this.$router.push('/workspace/' + this.appData.id);
        },
      };
      state[name].call(this);
    },
    // 过滤当前标题值
    filterMenuName(name) {
      const menuConfig = [
        { name: 'map', alias: '图层管理', components: 'MapAdd' },
        { name: 'data', alias: '数据', components: 'MapData' },
        { name: 'settings', alias: '设置', components: 'MapSet' },
        { name: 'mapDelete', alias: '地图', components: 'MapDelete' },
        { name: 'params', alias: '参数', components: 'MapParams' },
        { name: 'preview', alias: '预览', components: 'MapPreview' },
      ];
      const menuFilter = menuConfig.filter(item => item.name === name);
      if (menuFilter.length !== 0) {
        this.settingName = menuFilter[0].alias;
        this.settingComponents = menuFilter[0].components;
      }
    },
    // 关闭设置栏
    settingClose() {
      this.showSetting = false;
    },
    // 添加图层 TODO: 添加图层要做重复判断
    addNewLayers(serviceData) {
      const mapData = this.allControl[this.$store.getters.currentId];
      if (mapData.options.TileWMSLayer) {
        mapData.options.TileWMSLayer.data = {
          ...mapData.options.TileWMSLayer.data,
          ...serviceData,
        };
      } else {
        mapData.options['TileWMSLayer'] = {
          data: serviceData,
        };
      }
      this.$store.commit(types.UPDATE_CHART_CONFIG, {
        data: { [this.$store.getters.currentId]: mapData },
      });

      this.$store.commit(this.mapId + '/SET_MAP_SERVICELIST', serviceData);
    },
    // 设置图层到视图范围内
    setLayerToView(layers) {
      if (layers.layers.options.type) {
        this.$refs.mapCard.$refs.mapcard.$mapObject.fitBounds(layers.layers.getBounds(), {
          duration: 0,
          animate: true,
        });
      } else {
        this.$refs.mapCard.$refs.mapcard.$mapObject.fitBounds(layers.layers.options.saveBbox);
      }
    },
    addSubjectLayer(isRenderMap) {
      this.isRenderMap = isRenderMap;
    },
    editSubjectlayer(layers) {
      this.selectMenu('data');
      this.$nextTick(() => {
        this.editLayerData = {
          name: layers.name,
          types: layers.types,
        };
        this.isRenderMap = true;
      });
    },
    getMapId(id) {
      this.mapId = id;
    },
  },
};
</script>

<template>
  <div class="layout">
    <Layout>
      <Sider
        v-model="isCollapsed"
        :collapsed-width="80"
        breakpoint="md"
        collapsible>
        <Menu
          :class="menuitemClasses"
          :active-name="activeName"
          theme="dark"
          width="auto"
          @on-select="selectMenu">
          <MenuItem name="map">
          <div>
            <Icon
              type="map"
              color="#fff"></Icon>
            <span>地图</span>
          </div>
          </MenuItem>
          <MenuItem name="data">
          <div>
            <Icon
              type="soup-can"
              color="#fff"></Icon>
            <span>数据</span>
          </div>
          </MenuItem>
          <MenuItem name="mapFunction">
          <div>
            <Icon
              type="ios-cog"
              color="#fff"></Icon>
            <span>功能设置</span>
          </div>
          </MenuItem>
          <MenuItem name="settings">
          <div>
            <Icon
              type="gear-a"
              color="#fff"></Icon>
            <span>设置</span>
          </div>
          </MenuItem>
          <MenuItem name="save">
          <div>
            <Icon
              type="checkmark"
              color="#fff"></Icon>
            <span>保存</span>
          </div>
          </MenuItem>
          <MenuItem name="mapDelete">
          <div>
            <Icon
              type="ios-trash"
              color="#fff"></Icon>
            <span>删除</span>
          </div>
          </MenuItem>
          <MenuItem name="params">
          <div>
            <Icon type="settings"></Icon>
            <span>参数</span>
          </div>
          </MenuItem>
          <MenuItem name="preview">
          <div>
            <Icon
              type="eye"
              color="#fff" />
            <span>预览</span>
          </div>
          </MenuItem>
          <MenuItem name="goOut">
          <div>
            <Icon
              type="arrow-return-left"
              color="#fff"></Icon>
            <span>返回</span>
          </div>
          </MenuItem>
        </Menu>
        <div slot="trigger"></div>
      </Sider>
      <div
        v-if="showSetting"
        class="datav-setmenu">
        <div class="setting-header">
          <p>{{ settingName }}</p>
          <Icon
            type="ios-close-outline"
            size="20"
            @click.native="settingClose"></Icon>
        </div>
        <component
          :is="settingComponents"
          :subject-id="subjectId"
          :edit-layer-data="editLayerData"
          :map-id="mapId"
          class="setting-content"
          @on-addlayers="addNewLayers"
          @on-setLayerToView="setLayerToView"
          @on-setMapData="selectMenu"
          @on-addSubject="addSubjectLayer"
          @on-edit-subjectlayer="editSubjectlayer"></component>
      </div>
      <Layout class="datav-map-edit">
        <Content>
          <MapCard
            ref="mapCard"
            :all-options="controls.options?setControls(controls.options):[]"
            :is-render-map="isRenderMap"
            @on-get-mapid="getMapId"></MapCard>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<style lang="less" scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;

  .k-layout {
    height: calc(~'100vh');
  }

  .k-layout-sider {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
  }

  .datav-setmenu {
    position: absolute;
    top: 0;
    left: 80px;
    display: inline-block;
    width: 300px;
    height: 100%;
    background-color: #f9f9f9;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 901;
    opacity: 0.7;

    .setting-header {
      position: relative;
      background-color: #fff;

      p {
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        font-size: 14px;
      }

      .k-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
      }
    }

    .setting-content {
      width: 100%;
      height: calc(~'100vh - 40px');
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
  .datav-setmenu:hover {
    opacity: 1;
  }
}

.k-menu-item {
  padding: 8px 0;
  display: inline-block;
  width: 100%;
  text-align: center;
  border: none;
}

.k-menu-dark.k-menu-vertical .k-menu-item-active:not(.k-menu-submenu),
.k-menu-dark.k-menu-vertical .k-menu-submenu-title-active:not(.k-menu-submenu) {
  border-right: none;
}

.k-menu-item:hover > div,
.k-menu-dark.k-menu-vertical .k-menu-item-active:not(.k-menu-submenu) > div,
.k-menu-dark.k-menu-vertical .k-menu-submenu-title-active:not(.k-menu-submenu) > div {
  width: 80%;
  background-color: #20a1ff;
  margin: 0 auto;
  border-radius: 10px;
}

.menu-item span {
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.2s ease 0.2s;
  font-size: 12px;
  color: #fff !important;
}

.menu-item i {
  margin-right: 0;
  vertical-align: middle;
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
}

.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}

.datav-map-edit {
  position: relative;
  .k-layout-content {
    height: calc(~'100vh');
    width: 100%;
    background: #fff;
    background-color: #eee;
  }
}
</style>
